<template>
    <div class="container" v-title data-title='报备模板'>
        <Header title="报备模板"></Header>
        <div class="pre"><pre>{{copyContent}}</pre></div>
        <ul class="report-info-list" style="display: none;">
            <li>
                <div class="template-list-right" style="padding:0">
                    <div class="title">
                        <div class="template-list-left">
                            <div class="label-title">报备项目</div>
                            <div class="contrls">{{cusPre.premisesName}}</div>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="template-list-right">
                    <div class="title">
                        <div class="template-list-left">
                            <div class="label-title">客户姓名</div>
                            <div class="contrls">{{cusPre.name}}</div>
                        </div>
                    </div>
                </div>
            </li>

            <li>
                <div class="template-list-right">
                    <div class="title">
                        <div class="template-list-left">
                            <div class="label-title">客户号码</div>
                            <div class="contrls">{{cusPre.mobile}}</div>
                        </div>
                    </div>
                </div>
            </li>

            <li>
                <div class="template-list-right">
                    <div class="title">
                        <div class="template-list-left">
                            <div class="label-title">中介机构门店</div>
                            <div class="contrls">{{cusPre.staffCompanyName}}</div>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="template-list-right">
                    <div class="title">
                        <div class="template-list-left">
                            <div class="label-title">中介经纪人</div>
                            <div class="contrls">{{cusPre.staffName}}</div>
                        </div>
                    </div>
                </div>
            </li>

            <li>
                <div class="template-list-right">
                    <div class="title">
                        <div class="template-list-left">
                            <div class="label-title">经纪人电话</div>
                            <div class="contrls">{{cusPre.staffPhone}}</div>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="template-list-right">
                    <div class="title">
                        <div class="template-list-left">
                            <div class="label-title">预计到访时间</div>
                            <div class="contrls">{{cusPre.hopeVisitTime}}</div>
                        </div>
                    </div>
                </div>
            </li>
            <li></li>
            <li v-for="m in models">
                <div class="template-list-right">
                    <div class="title">
                        <div class="template-list-left">
                            <div class="label-title">{{m.modelColumn}}</div>
                            <div class="contrls">{{m.content}}</div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <div class="footer">
	    	<div class="footer-content">
                <button class="operationBtn btnOne" @click="backDetail">返回</button>
                <button class="operationBtn btnTwo" v-clipboard:copy="copyContent" v-clipboard:success="onCopy" v-clipboard:error="onError">复制报备信息</button>
    		</div>
	    </div>
    </div>
</template>

<script>
    import VueClipboard from 'vue-clipboard2';
    export default {
        components:{
            VueClipboard
        },
        data(){
            return{
                visitTimeStatus:"1",
                recommenderStatus:"1",
                copyContent:'',
                cusPre:{
                   premisesName:'',
                   name:'',
                   mobile:'',
                   staffCompanyName:'',
                   hopeVisitTime:''
                },
               models:[]
            }
        },
        mounted:function(){

            this.cusPre =  this.$route.params.cusPre;
            this.initText(this.cusPre);
        },
        methods:{
            initText(cusPre){
                var _self = this;
                let visitTime = '';
                let createTime = '';
                if(cusPre.hopeVisitTime){
                    visitTime = _self.formatDate(cusPre.hopeVisitTime,'yyyy-MM-dd hh:mm:ss');
                }
                if(cusPre.createTime){
                    createTime = _self.formatDate(cusPre.createTime,'yyyy-MM-dd hh:mm:ss');
                }
                _self.copyContent  =
                    "报备项目：" + cusPre.premisesName +"\r\n" +
                    "客户姓名：" + cusPre.name + "\r\n" +
                    "客户号码：" + cusPre.mobile + "\r\n" +
                    "中介机构门店：" + cusPre.staffCompanyName + "\r\n" +
                    "中介经纪人：" + cusPre.staffName + "\r\n" +
                    "经纪人电话：" + cusPre.staffPhone + "\r\n" +
                    "预计到访时间：" + visitTime + "\r\n" +
                     "报备时间：" + createTime + "\r\n"

                var url = this.utilHelper.apiUrl+'/api/getReportModelInfoList';
                var body = {};
                body.params = {
                    reportId:cusPre.id,
                    premisesId:cusPre.premisesId,
                    mobile:cusPre.mobile,
                    agencyName:cusPre.staffName,
                    agencyPhone:cusPre.staffPhone,
                    premisesName:cusPre.premisesName,
                    customerName:cusPre.name,
                    storeName:cusPre.staffCompanyName,
                    visitTime:visitTime,
                    createTime:createTime,
                    genderName:cusPre.genderName,
                    recommenderUuid:cusPre.recommenderUuid
                };
                _self.$http.post(url,body).then((response) =>{
                    var resBody = response.body;

                    if(resBody.result == '1'){
                        // _self.copyContent = _self.copyContent.replace(/^\s*|\s*$/g,"");
                        if(resBody.resData.repotModelDetail){
                            _self.copyContent = resBody.resData.repotModelDetail;
                        }
                        _self.models = resBody.resData.reportModelInfoList;
                    }
                },(response)=>{

                });
            },
            // 取预制模板字段
            getDefaultModelList(){
                var _self = this;
                var url = this.utilHelper.apiUrl + '/api/getReportModelList';
                var body = {}
                body.params = {premisesId:_self.cusPre.premisesId,modelType:1}
                _self.$http.post(url, body).then((response) => {
                    var body = response.body;
                    if(body.result == '1'){
                        
                        var reportDefaultModelList = body.resData.list;
                        if(reportDefaultModelList && reportDefaultModelList.length > 0){
                            for(var r in reportDefaultModelList){
                                if(reportDefaultModelList[r].modelColumn === '预计到访时间'){
                                    _self.visitTimeStatus = reportDefaultModelList[r].showFlag;
                                }
                                if(reportDefaultModelList[r].modelColumn === '报备推荐人'){
                                    _self.recommenderStatus = reportDefaultModelList[r].showFlag;
                                }
                            }
                        }
                    }else{
                        layer.msg('获取报备模板失败');
                    }
                    console.log(_self.visitTimeStatus + '---------' +_self.recommenderStatus);
                })
            },
            copyModal(){
                this.$copyText(this.copyContent).then(function (e) {
                    layer.msg('复制成功')
                    console.log(e)
                }, function (e) {
                    layer.msg("复制失败，请手动复制")
                    console.log(e)
                })
            },
            backDetail(){
                var _self = this;
				_self.$router.replace({
					path: '/declareDetail/'+_self.cusPre.id
				})
            },
            formatDate(date,fmt){
                
                if(typeof(date) == 'number'){
                    var tempDate = new Date();
                    tempDate.setTime(date);
                    date = tempDate;
                }
                if(typeof(date) == 'string' ){
                    var arr1 = date.split(" ");
                    var sdate = arr1[0].split('-');
                    var stime = arr1[1].split(':');

                    if(stime.length > 0){
                        date = new Date(sdate[0], sdate[1]-1, sdate[2],stime[0],stime[1],stime[2]);
                    }else  {
                        date = new Date(sdate[0], sdate[1]-1, sdate[2]);
                    }

                }
                if(/(y+)/.test(fmt)){
                    fmt = fmt.replace(RegExp.$1, (date.getFullYear()+'').substr(4-RegExp.$1.length));
                }
                let o = {
                    'M+': date.getMonth()+1,
                    'd+': date.getDate(),
                    'h+': date.getHours(),
                    'm+': date.getMinutes(),
                    's+': date.getSeconds()
                }
                for(let k in o){
                    let str = o[k]+'';
                    if(new RegExp(`(${k})`).test(fmt)){
                        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length===1)?str:('00'+str).substr(str.length));
                    }
                }
                return fmt;
            },
            onCopy(){
                console.log(this.copyReportModal);
                layer.msg('复制成功')
            },
            onError(){
                layer.msg("复制失败，请手动复制")
            }
        }
    }
</script>

<style scoped>
.contrls{text-align: right}
.template-list-right{padding:0}
/*底部按钮*/
.footer{position: fixed;left: 0;right: 0;bottom: 0;z-index: 2;}
.footer-content .operationBtn{float: left;width: 50%;height: 40px;line-height: 40px;text-align: center;}
.footer-content .btnOne{background-color: #fff;border-top: 1px solid #cdcdcd;color: #333;}
.footer-content .btnTwo{background-color: #eb6100;color: #fff;}

.footer-content:after,.personal-info:after,.other-list:after{content:''; display:block; clear:both; visibility: hidden; overflow: hidden; font-size:0; height:0;}
.pre{width: 90%;    background: #fff;border: 1px solid #bbb;margin: 10px auto;min-height: 300px;border-radius: 5px;padding: 3px;}
.pre pre{white-space: pre-wrap;word-wrap: break-word;}
</style>